<template>
	<div id="">
		<div class="header-title">
			账单列表
		</div>
		<!-- 表格数据 -->
		<div class="bg-white m-2 px-2 pt-1">
			<a-row class="w-100">
				<!-- 关键词 -->
				<a-col :xs="24"  :md="12" :lg="6">
					<div class="flex align-center pr-3 my-1">
						<div class="searchtitle">日期：</div>
						<a-range-picker @change="onChangeData" class="w-100" separator="—"  :placeholder="['开始时间', '结束时间']" v-model="time">
							<a-icon slot="suffixIcon" type="calendar" />
						</a-range-picker>
					</div>
				</a-col>
				<a-col :xs="24"  :md="12" :lg="6">
					<div class="flex align-center pr-3 my-1">
						<div class="searchtitle">部门/人员：</div>
						<div class="normol-width" @click="click_part()">
							<a-input class="cursor-pointer text-ellipsis"  disabled="disabled" v-model="deprtpeo" placeholder="请选择"/>
						</div>
						
						<!-- <div class="normol-width flex justify-between align-center px-1" @click="click_part(false)">
							<div :class="deprtpeo?'text-black':'text-muted'" class="text-ellipsis mr-1">
								{{deprtpeo||'请选择'}}
							</div>
							<a-icon type="down" class="text-muted" />
						</div> -->
					</div>
				</a-col>
				<!-- 餐厅选择 -->
				<a-col :xs="24"  :md="12" :lg="6">
					<div class="flex align-center pr-3 my-1">
						<div class="searchtitle">餐厅：</div>
						<a-select v-model="halling"  class="w-100">
							<a-select-option v-for="(item,index) in hall" :key="index" @click="click_Hall(index)">
								{{ item.title }}
							</a-select-option>
						</a-select>
					</div>
				</a-col>
				<a-col :xs="24"  :md="12" :lg="6"  >
					<!-- 餐时选择 -->
					<div class="flex align-center pr-3 my-1" v-if="showSearch">
						<div class="searchtitle">餐时：</div>
						<a-select v-model="mealing"  class="w-100">
							<a-select-option v-for="(item,index) in meal" :key="index" @click="click_meal(index)">
								{{ item.title }}
							</a-select-option>
						</a-select>
					</div>
					
					<div class="flex align-center justify-end pr-3 mt-1" v-if="!showSearch">
						<a-button type="primary" @click="click_search()">
							查询
						</a-button>
						<a-button class="ml-2" @click="click_reset()">
							重置
						</a-button>
						<a-button type="link" @click="click_showSearch">
							展开
							<a-icon type="down" />
						</a-button>
					</div>
				</a-col>
			</a-row>
			
			<a-row class="my-1 flex align-center" v-if="showSearch">
				
				<a-col :span="8">
					<div class=" flex align-center">
						<a-radio :checked="radiocheck" @click="click_check()">离职人员</a-radio>
						<a-tooltip>
							<template slot="title">
								接入系统之后离职的人员
							</template>
							<a-icon class="tips font15 cursor-pointer" type="exclamation-circle" />
						</a-tooltip>
					</div>
				</a-col>
			</a-row>

			<div class="flex align-center justify-between  flex-wrap">
				<div class="flex align-center mt-2">
					<a-button type="primary" icon="save" @click="click_export()">
						报表导出
					</a-button>
					<div class="ml-2 text-primary">
						<list-columns-setter v-model="columns" :def-columns="columns" ref="columnsSetter" colName="4" />
					</div>
				</div>
				<div class="flex align-center mt-2" v-if="showSearch">
					<a-button type="primary" @click="click_search()">
						查询
					</a-button>
					<a-button class="ml-2" @click="click_reset()">
						重置
					</a-button>
					<a-button type="link" @click="click_showSearch">
						收起
						<a-icon type="up" />
					</a-button>
				</div>
			</div>


			<div class="table mt-2">
				<a-table :columns="columns" :dataSource="data" @change="pageTableChange" :pagination="pagination"
					:loading='tableLoading' :scroll="{ x: true}" rowKey="id">
					<template slot="status" slot-scope="text, record, index">
						<!-- 0 已报餐 1 已就餐2 已取消 -->
						<div v-if="text == 0">
							<span class="mr circle-green">●</span>已报餐
						</div>
						<div v-if="text == 1">
							<span class="mr circle-blue">●</span>已就餐
						</div>
						<div v-if="text == 2">
							<span class="mr circle-gray">●</span>已取消
						</div>
					</template>
					<template slot="type" slot-scope="text, record, index">
						<!-- //0 刷脸就餐 1 报餐订单  2 二维码就餐 -->
						<div v-if="text == 0">
							刷脸就餐
						</div>
						<div v-if="text == 1">
							报餐订单
						</div>
						<div v-if="text == 2">
							二维码就餐
						</div>
					</template>

				</a-table>
			</div>
		</div>
		<!-- 弹框组件显示 -->
		<div>
			<!-- 部门人员弹框 -->
			<chooseDeprt ref="deprtModal" :sonMethod="sonMethod">
			</chooseDeprt>
		</div>

	</div>
</template>

<script>
	// 选择部门人员组件
	import chooseDeprt from '@/components/chooseDeprt.vue';
	import ListColumnsSetter from '@/components/ListColumnsSetter'
	export default {
		inject:['layout'],
		components: {
			chooseDeprt,
			ListColumnsSetter
		},
		data() {
			return {
				showSearch: false, //展开隐藏搜索面板
				time: [], //日期
				hall: [], //餐厅
				halling: '',
				hallid: '',
				meal: [], //餐时
				mealing: '',
				mealid: '',
				couponSelected:'',
				data: [], //表格数据
				columns: [{
						title: '编号',
						key: 'rowIndex',
						dataIndex: 'rowIndex',
						align: 'left',
						customRender: (t, r, index) => {
							return parseInt(index) + 1;
						}
					},
					{
						title: '订单号',
						dataIndex: 'number',
						align: 'left'
					},
					{
						title: '姓名',
						dataIndex: 'name',
						align: 'left'
					},
					{
						title: '工号',
						dataIndex: 'jobnumber',
						align: 'left'
					},
					{
						title: '部门',
						dataIndex: 'department_name',
						align: 'left'
					},
					{
						title: '职位',
						dataIndex: 'position',
						align: 'left'
					},
					{
						title: '餐时',
						dataIndex: 'repast_title',
						align: 'left'
					},
					{
						title: '餐厅',
						dataIndex: 'dininghall_title',
						align: 'left'
					},
					{
						title: '交易状态',
						dataIndex: 'status', //0 已报餐 1 已就餐2 已取消
						align: 'left',
						scopedSlots: {
							customRender: 'status'
						},
					},
					{
						title: '账单类型',
						dataIndex: 'type', //0 刷脸就餐 1 报餐订单  2 二维码就餐
						align: 'left',
						scopedSlots: {
							customRender: 'type'
						},
					},
					{
						title: '账单金额',
						dataIndex: 'balance',
						align: 'left'
					},
					{
						title: '设备标题',
						dataIndex: 'device_title',
						align: 'left'
					},
					{
						title: '设备序列号',
						dataIndex: 'deviceSn',
						align: 'left'
					},
					{
						title: '账单日期',
						dataIndex: 'date',
						align: 'left'
					},
					{
						title: '创建时间',
						dataIndex: 'add_time',
						align: 'left'
					},
					{
						title: '付款时间',
						dataIndex: 'modify_time',
						align: 'left'
					},
					{
						title: '二维码标题',
						dataIndex: 'qrcode_title',
						align: 'left'
					}
				], //表格列表
				pagination: {
					pageSize: 10, // 一页的数据限制
					current: 1, // 当前页
					total: 10, // 总数
					// hideOnSinglePage: true,
					pageSizeOptions:['10','20','30'],
					showTotal:(total,range)=>{
						return '总计：'+total+'条数据'
					},
					showSizeChanger:true
				}, //表格分页
				tableLoading: false, //false

				deprtpeo: '', //请选择部门人员名字
				depart_name_peo: '', //stringify部门人员
				radiocheck: false, //离职人员单选按钮
				isleave: '0', //是否返回离职人员1否0是
				filename: '云一就餐_账单记录明细',//导出表格名字
			};
		},

		created() {
			this.getDayMonth();
		},
		methods: {
			//获取餐厅
			get_hall() {
				this.layout.showLoading();
				axios.post('/dininghall/get_ls', {
					currentPage: '1',
					pageSize: '100',
					fiter: '1', //回总数
					type: '', //类型 0  餐厅 1 超市
				}).then(res => {
					this.layout.hideLoading();
					if (res.status == 200) {
						this.hall = res.data.data.data;
						this.halling = res.data.data.data[0].title;
						this.hallid = res.data.data.data[0].id;
						// console.log(this.hall);
						this.get_meal();
					} else {
						this.$message.error(res.data.data.msg);
					}
				}).catch(res => {
					this.layout.hideLoading();
					this.$message.error(res);
					console.log(res);
				});
			},
			//获取餐时
			get_meal() {
				this.layout.showLoading();
				axios.post('/repast/get_ls', {
					dininghall_id: this.hallid,
					currentPage: '1',
					pageSize: '100',
					keyword: '',
					fiter: '1', //回总数
				}).then(res => {
					this.layout.hideLoading();
					if (res.status == 200) {
						// console.log(res.data.data);
						this.meal = res.data.data;
						this.mealing = res.data.data[0].title;
						this.mealid = res.data.data[0].id;
						this.get_users(); //table数据
					} else {
						this.$message.error(res.data.data.msg);
					}
				}).catch(res => {
					this.layout.hideLoading();
					this.$message.error(res);
					// console.log(res);
				});
			},
			// 展开收起
			click_showSearch() {
				this.showSearch = !this.showSearch;
			},
			//日期选择显示
			onChangeData(date, dateString) {
				this.time = dateString;
				// console.log(this.time);
			},
			//点击选择部门人员
			click_part() {
				this.$refs.deprtModal.openWin();
			},
			//餐厅选择
			click_Hall(value) {
				this.halling = this.hall[value].title;
				this.hallid = this.hall[value].id;
                  this.get_meal();
				// console.log(`Selected: ${value}`);
			},
			// 餐食选择
			click_meal(value) {
				this.mealing = this.meal[value].title;
				this.mealid = this.meal[value].id;
             },

			//table数据分页操作
			pageTableChange(pagination, filters, sorter) {
				this.pagination = pagination
				this.get_users();
				//切换页数重新显示内容
				this.$refs.columnsSetter.initColumns();
			},
			//查询人员
			get_users() {
				this.data = [];
				this.tableLoading = true;
				axios.post('/bill/get_ls', {
					starttime: this.time[0], //开始时间
					endtime: this.time[1], //结束时间
					userlst: this.depart_name_peo, //string表
					dininghall_id: this.hallid, //餐厅id
					repast_id: this.mealid, //餐食id
					currentPage: this.pagination.current,
					pageSize: this.pagination.pageSize,
					fiter: '1', //回总数
					isleave: this.isleave, //是否返回离职人员1否0是
				}).then(res => {
					if (res.status == 200) {
						this.tableLoading = false;
						// console.log(res.data);
						this.pagination.total = res.data.data.count;
						this.data = res.data.data.data;
					} else {
						this.$message.error(res.data.data.msg);
					}
				}).catch(res => {
					this.tableLoading = false;
					this.$message.error(res);
				});
			},

			//单选框是否选中
			click_check() {
				this.radiocheck = !this.radiocheck;
				this.isleave = this.radiocheck ? '1' : '0';
			},

			//导出报表使用的数据json
			formatJson(filterVal, jsonData) {
				// console.log(jsonData)
				return jsonData.map(v => filterVal.map(j => {
					if (j === 'timestamp') {
						return parseTime(v[j])
					} else {
						return v[j]
					}
				}))
			},
			//导出报表方法
			click_export() {
				axios.post('/bill/get_ls', {
					starttime: this.time[0], //开始时间
					endtime: this.time[1], //结束时间
					userlst: this.depart_name_peo, //string表
					dininghall_id: this.hallid, //餐厅id
					repast_id: this.mealid, //餐食id
					fiter: '1', //回总数
					isleave: this.isleave, //是否返回离职人员1否0是
				}).then(res => {
					// console.log(res);
					if (res.status == 200) {
						if(res.data.ret==200){
							this.export_data( res.data.data.data)
						}
					} else {
						this.$message.error(res.data.data.msg);
					}
				}).catch(res => {
					this.$message.error(res);
				});
				
			},
			//导出报表方法
			export_data(exportData){
				if (exportData == [] || exportData.length==0) {
					this.$message.error('要导出的数据为空!')
					return
				}
				//当前时间获取
				let thisTime = this.$util.getCurrentDate(2);
				import('@/vendor/Export2ExcelStyle').then(excel => {
					const tHeader = []; //表头
					const filterVal = []; //表头对应字段
					this.columns.forEach(k => {
						tHeader.push(k.title);
						filterVal.push(k.dataIndex);
					});
					tHeader.splice(0,1);
					filterVal.splice(0,1);
					tHeader.splice(3, 0, "userid");
					filterVal.splice(3, 0, "userid");
					const list = exportData;
					list.forEach((k)=>{
						//'type', //0 刷脸就餐 1 报餐订单  2 二维码就餐'status', //0 已报餐 1 已就餐2 已取消
						k.number = k.number == null ? "" : k.number;
						k.name = k.name == null ? "" : k.name;
						k.jobnumber = k.jobnumber == null ? "" : k.jobnumber;
						k.department_name = k.department_name == null ? "" : k.department_name;
						k.position = k.position == null ? "" : k.position;
						k.repast_title = k.repast_title == null ? "" : k.repast_title;
						k.dininghall_title = k.dininghall_title == null ? "" : k.dininghall_title;
						k.balance = k.balance == null ? "" : k.balance;
						k.device_title = k.device_title == null ? "" : k.device_title;
						k.deviceSn = k.deviceSn == null ? "" : k.deviceSn;
						k.date = k.date == null ? "" : k.date;
						k.add_time = k.add_time == null ? "" : k.add_time;
						k.modify_time = k.modify_time == null ? "" : k.modify_time;
						k.qrcode_title = k.qrcode_title == null ? "" : k.qrcode_title;
						if(k.type==0){
							k.type="刷脸就餐";
						}else{
							k.type="报餐订单";
						}
						if(k.state==0){
							k.state="已报餐"
						}else if(k.state==1){
							k.state="已就餐"
						}else{
							k.state="已取消"
						}
					})
					const data = this.formatJson(filterVal, list)
					excel.export_json_to_excel({
						title: ["云一就餐_账单记录明细_" + thisTime],
						header: tHeader,
						data,
						headerStyle: ['A2', 'Q2'], //自定义列标题左右样式
						SheetJS: '云一就餐_账单记录明细', //工作簿名字
						merges: ["A1:Q1"], //控制表名字从几到达几。
						bottomTips: ["报表生成时间：" + thisTime, '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
						filename: "云一就餐_账单记录明细_" + this.$util.getCurrentDate(3),
						autoWidth: true,
						bookType: 'xlsx'
					})
				})
			},
			//查询方法
			click_search() {
				this.get_users();
			},
			//重置方法
			click_reset() {
				this.hall = [], //
				this.halling = '';
				this.hallid='';
				this.meal=[];
				this.mealing='';
				this.mealid='';
				this.data=[];
				this.pagination = {
					pageSize: 10, // 一页的数据限制
					current: 1, // 当前页
					total: 10, // 总数
					// hideOnSinglePage: true,
					pageSizeOptions:['10','20','30'],
					showTotal:(total,range)=>{
						return '总计：'+total+'条数据'
					},
					showSizeChanger:true
				}
				this.radiocheck = false; //离职人员单选按钮
				this.isleave = '0',
				this.deprtpeo = '', //清空显示部门人员名字
				this.depart_name_peo = '';
				this.getDayMonth();
			},
			//选择部门/人员
			sonMethod(cancel) {
				// console.log(this.$refs.deprtModal.selectList);
				if (cancel == 'cancel') {
					this.deprtpeo = ''
					return
				}
				if (this.$refs.deprtModal.selectList.users.length == 0 && this.$refs.deprtModal.selectList.departments
					.length == 0) {
					this.deprtpeo = ''
					return
				}
				let deprtpeo = ''
				let depart_name_peo = {
					departments: [],
					users: []
				};
				this.$refs.deprtModal.selectList.departments.forEach((k) => {
					depart_name_peo.departments.push({
						department_id: k.department_id
					});
					if (deprtpeo == '') {
						deprtpeo = deprtpeo + k.name
					} else {
						deprtpeo = deprtpeo + '、' + k.name
					}
				})
				this.$refs.deprtModal.selectList.users.forEach((k) => {
					depart_name_peo.users.push({
						userid: k.userid
					});
					if (deprtpeo == '') {
						deprtpeo = deprtpeo + k.name
					} else {
						deprtpeo = deprtpeo + '、' + k.name
					}
				})
				this.deprtpeo = deprtpeo;
				this.depart_name_peo = depart_name_peo;
			},
			// 格式化日期格式为 xxxx-xx-xx
			getFullDate(targetDate) {
				var D, y, m, d;
				if (targetDate) {
					D = new Date(targetDate);
					y = D.getFullYear();
					m = D.getMonth() + 1;
					d = D.getDate();
				} else {
					y = fullYear;
					m = month;
					d = date;
				}
				m = m > 9 ? m : '0' + m;
				d = d > 9 ? d : '0' + d;
				return y + '-' + m + '-' + d;
			},
			// 获取本月第一天至最后一天
			getDayMonth(){
				this.time=[];
				var nowDate = new Date();
				var fullYear = nowDate.getFullYear();
				var month = nowDate.getMonth() + 1; // getMonth 方法返回 0-11，代表1-12月
				var endOfMonth = new Date(fullYear, month, 0).getDate(); // 获取本月最后一天
				var endDate = this.getFullDate(nowDate.setDate(endOfMonth)); //当月最后一天
				var startDate = this.getFullDate(nowDate.setDate(1)); //当月第一天
				this.time.push(startDate);
				this.time.push(endDate);
				this.get_hall();
			}
		}
	};
</script>

<style scoped>
	.searchtitle {
		text-align: left;
		white-space: nowrap !important;
		/* width: 80px; */
		display: inline-block;
	}

	.header-title {
		padding: 0 32px;
		height: 50px;
		line-height: 50px;
		font-size: 20px;
		text-align: left;
		font-weight: bold;
		background-color: #FFFFFF;
	}

	.normol-width {
		width: 100%;
		height: 32px;
	}

	.tips {
		color: #d3d3d3;
	}

	.partment-width {
		margin-left: 50px;
		width: 300px;
		height: 32px;
		border-radius: 5px;
		border: 1px solid #d9d9d9
	}

	.ant-table-thead>tr>th {
		font-weight: bold;
	}
	
	.circle-blue{
		color:#1677FF ;
	}
	.circle-green{
		color:#52C41A;
	}
	.circle-gray{
		color: #CCCCCC ;
	}
	::v-deep .ant-calendar-range-picker-separator{
		color:#CCCCCC ;
	}
	>>> .ant-calendar-picker-input {
		white-space: nowrap;
	}
	::v-deep .ant-table-thead > tr > th{
		font-weight: bold !important;
	}
	::v-deep .ant-input[disabled]{
		background-color: #FFFFFF;
		cursor: pointer;
		color: #000000;
	}
</style>
